<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="webkit" name="renderer">
    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1" name="viewport">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="telephone=no" name="format-detection">
    <title>登陆 - Blog</title>
    <link href="./static/layui/css/layui.css" rel="stylesheet">
    <link href="./static/css/common.css" rel="stylesheet">
    <link href="./static/css/login.css" rel="stylesheet">
</head>
<body>
<div class="layui-container">
    <div class="layui-row">
        <div class="layui-col-md12 layui-hide-xs xs-hide"></div>
        <div class="layui-col-md4 layui-col-md-offset4 login-main">
            <img class="logo" src="./static/images/logo.png">
            <div class="main formbox" id="login_div">
                <form accept-charset="utf-8" action="login_submit" class="layui-form" method="get">
                    <div class="inputbox">
                        <input autocomplete="off" class="layui-input" id="account1" lay-verify="required" name="title"
                               placeholder="请输入邮箱账号" required type="text">
                    </div>

                    <div class="margin20"></div>
                    <div class="inputbox">
                        <input autocomplete="off" class="layui-input" id="password1" lay-verify="required" name="password"
                               placeholder="请输入密码" required type="text">
                    </div>
                    <div class="margin20"></div>
                    <div class="inputbox info">
                        <input checked lay-skin="primary" name="checkbox" type="checkbox"/>
                        我已阅读并同意<a href="javascript:;">用户协议</a>和<a href="javascript:;">隐私条款</a>
                    </div>

                    <div class="layui-row layui-col-space20 bts">
                        <div class="layui-col-md6">
                            <button class="layui-btn" id="to_main_btn" lay-filter="formDemo" lay-submit type="button">
                                登陆
                            </button>
                        </div>
                        <div class="layui-col-md6">
                            <a class="layui-btn layui-btn-normal" href="javascript:clickReg()">去注册</a>
                        </div>
                        <div class="layui-col-md12">
                            <a class="layui-btn layui-btn-primary" href="index.html">返回首页</a>
                        </div>
                    </div>
                </form>
            </div>
            <div class="main formbox" hidden id="register_div">
                <form accept-charset="utf-8" action="login_submit" class="layui-form" method="get">
                    <div class="inputbox">
                        <input autocomplete="off" class="layui-input" id="account" lay-verify="required" name="title"
                               placeholder="请输入邮箱账号" required type="text">
                    </div>

                    <div class="margin20"></div>
                    <div class="inputbox">
                        <input autocomplete="off" class="layui-input" id="password" lay-verify="required" name="password"
                               placeholder="请输入密码" required type="password">
                    </div>

                    <div class="margin20"></div>
                    <div class="inputbox">
                        <input autocomplete="off" class="layui-input" id="repassword" lay-verify="required" name="password"
                               placeholder="请确认密码" required type="password">
                    </div>
                    <br>
                    <div class="inputbox info">
                        <input checked lay-skin="primary" name="checkbox" type="checkbox"/>
                        我已阅读并同意<a href="javascript:;">用户协议</a>和<a href="javascript:;">隐私条款</a>
                    </div>

                    <div class="layui-row layui-col-space20 bts">
                        <div class="layui-col-md6">
                            <a class="layui-btn layui-btn-normal" id="login1" type="button">去登陆</a>
                        </div>
                        <div class="layui-col-md6">
                            <button class="layui-btn" id="register1" lay-filter="formDemo" lay-submit type="button">
                                确认注册
                            </button>
                        </div>
                        <div class="layui-col-md12">
                            <a class="layui-btn layui-btn-primary" href="index.html">返回首页</a>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

</body>
<script src="./static/layui/layui.all.js"></script>
<script src="./static/js/jquery-1.12.4.min.js"></script>
<script>

    $(document).ready(function () {
        var accountValue = null;
        var password = null;
        var repassword = null;


        //下边这块是登录
        // 邮箱验证正则表达式
        var emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;

        // 光标移除input输入框的时候自动获取input中的值
        $("#account1").blur(function () {
            // 获取注册input账号输入框中的值
            accountValue = $(this).val();
            // 验证邮箱格式
            if (!emailRegex.test(accountValue)) {
                // 移除之前的提示
                $("#span1").remove();
                var input = $("#account1");
                var span = $("<span id='span1' style='color: red'>请输入有效的邮箱地址</span>");
                // 在输入框后面追加 span 元素
                input.after(span);
                $(this).val('');  // 清空输入框
            } else {
                // 移除之前的提示
                $("#span1").remove();
            }
        });

        $("#password1").blur(function () {

            // 注册密码输入框中的值
            password = $(this).val();


            $("#to_main_btn").click(function () {
                $.post("Us/login", {"username": accountValue, "password": password}, function (result) {
                    if (result.status === 1) {
                        window.location = 'main.html';
                    } else {
                        // 移除之前的提示
                        $("#span1").remove();
                        var input = $("#account1");
                        var span = $("<span id='span1' style='color: red'>登陆失败</span>");
                        // 在输入框后面追加 span 元素
                        input.after(span);
                        $("#account1").val('');  // 清空输入框
                        $("#password1").val('');
                    }
                });
            });

        });


        //下边这块是注册模块
        // 光标移除input输入框的时候自动获取input中的值
        $("#account").blur(function () {
            // 获取注册input账号输入框中的值
            accountValue = $(this).val();

            // 验证邮箱格式
            if (!emailRegex.test(accountValue)) {
                // 移除之前的提示
                $("#span1").remove();
                var input = $("#account");
                var span = $("<span id='span1' style='color: red'>请输入有效的邮箱地址</span>");
                // 在输入框后面追加 span 元素
                input.after(span);
                $(this).val('');  // 清空输入框
            } else {
                // 移除之前的提示
                $("#span1").remove();
            }
        });


        $("#password").blur(function () {
            // 注册密码输入框中的值
            password = $(this).val();
        });

        $("#repassword").blur(function () {
            // 获得确认注册密码输入框中的值
            repassword = $(this).val();

            if (password == "") {
                // 移除之前的提示
                $("#span1").remove();
                var input = $("#password");
                var span = $("<span id='span1' style='color: red'>请输入密码</span>");
                // 在输入框后面追加 span 元素
                input.after(span);
            } else if (repassword == "") {
                // 移除之前的提示
                $("#span1").remove();
                var input = $("#repassword");
                var span = $("<span id='span1' style='color: red'>请输入确认密码</span>");
                // 在输入框后面追加 span 元素
                input.after(span);
            } else if (password !== repassword) {
                // 移除之前的提示
                $("#span1").remove();
                var input = $("#repassword");
                var span = $("<span id='span1' style='color: red'>两次密码输入不一致，请检查密码</span>");
                // 在输入框后面追加 span 元素
                input.after(span);
                $("#account").val('');
                $("#password").val('');
                $("#repassword").val('');
            } else {
                // 移除之前的提示
                $("#span1").remove();
                var input = $("#repassword");
                var span = $("<span id='span1' style='color: green'>密码输入正确</span>");
                // 在输入框后面追加 span 元素
                input.after(span);
            }
        });


        // 注册按钮点击事件
        $("#register1").click(function () {
            accountValue = $("#account").val();
            password = $("#password").val();
            repassword = $("#repassword").val();

            // 检查密码是否一致
            if (password !== repassword) {
                // 移除之前的提示
                $("#span1").remove();
                var input = $("#repassword");
                var span = $("<span id='span1' style='color: red'>两次密码输入不一致，请检查密码</span>");
                // 在输入框后面追加 span 元素
                input.after(span);
                $("#account").val('');
                $("#password").val('');
                $("#repassword").val('');
            }

            // 发送POST请求
            $.post("Us/add", {"username": accountValue, "password": password}, function (result) {
                clickLog();
            });
        });
    });


    function clickReg() {
        $("#register_div").show();
        $("#login_div").hide();
    }

    function clickLog() {
        $("#login_div").show();
        $("#register_div").hide();
    }

    /*    $(function () {
            $("#to_main_btn").click(function () {
                window.location = 'main.html';
            })
        });*/


</script>
</html>